<template>
    <view class='content'>
        <view class="main">
            <view class="head-card">
                <view class="name">{{ store.shopName }}</view>
                <view class="wd">我的余额（元）</view>
                <view class="price">¥{{ myData.balance / 100 }}</view>
                <!-- <view class="detail" @click="goDetail">
                    <view>充值明细</view>
                    <image src="/static/jt-b.png" />
                </view> -->
                <view class="foot">
                    <view>充余额：¥{{ myData.bonusBalance / 100 }}</view>
                    <view>赠余额：¥{{ myData.rechargeBalance / 100 }}</view>
                </view>
            </view>
            <view class="box rechange">
                <view class="title">
                    <view>
                        充值金额
                    </view>
                    <view class="detail" @click="goDetail">
                        <view>充值明细</view>
                        <image src="/static/jt.png" />
                    </view>
                </view>
                <view class="list">
                    <view class="list-item">
                        <!-- <view class="item-box" v-for="(item, index) in list" :key="index">
                            <view class="item" v-for="(itemc, indexc) in item" :key="itemc.id"
                                @click="itemChange(itemc, indexc, index)" :class="{ check: checkItem.id === itemc.id }">
                                <view>{{ itemc.payPrice / 100 }} 元</view>
                                <view class="sale">赠{{ itemc.bonusPrice / 100 }}元({{ filterSale(itemc) }}折)</view>
                            </view>
                            <view class="list-table" v-if="tableIndex === index">
                                <view class="triangle-up" :class="{ right: itemIndex === 1, left: itemIndex === 0 }"></view>
                                <view class="thead">
                                    <view class="f2">时段</view>
                                    <view class="td">门店标准价</view>
                                    <view>{{ tableData.sale }}折后价</view>
                                </view>
                                <view class="tr">
                                    <view class="f2">夜间24:00-中午12:00</view>
                                    <view class="td">48元/小时</view>
                                    <view>{{ tableData.price1 }}元/小时</view>
                                </view>
                                <view class="tr">
                                    <view class="f2">中午12:00-夜间24:00</view>
                                    <view class="td">58元/小时</view>
                                    <view>{{ tableData.price2 }}元/小时</view>
                                </view>
                            </view>
                        </view> -->
                        <view class="item-box" v-for="(item, index) in list" :key="index">
                            <view class="item" v-for="(itemc, indexc) in item" :key="itemc.id"
                                @click="itemChange(itemc, indexc, index)" :class="{ check: checkItem.id === itemc.id }">
                                <view>{{ itemc.payPrice / 100 }} 元</view>
                                <view class="sale">赠{{ itemc.bonusPrice / 100 }}元({{ filterSale(itemc) }}折)</view>
                            </view>
                            <view class="list-table" v-if="tableIndex === index">
                                <view class="triangle-up" :class="{ right: itemIndex === 1, left: itemIndex === 0 }"></view>
                                <view class="thead">
                                    <view class="f2">时段</view>
                                    <view class="td">门店标准价</view>
                                    <view>{{ sale }}折后价</view>
                                </view>
                                <view class="tr" v-for="(item,index) in tableData" :key="index">
                                    <view class="f2">{{item.startTime}}-{{item.endTime}}</view>
                                    <view class="td">{{item.marketPrice}}</view>
                                    <view>{{ item.salePrice }}</view>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
            <view class="box rule">
                <view class="title">
                    <view>
                        充值说明
                    </view>
                </view>
                <view class="text">
                    充值和赠送金额同时计入会员钱包，开台支付时选择余额支付
                </view>
                <view class="text">您充值的是门店内部会员卡，此卡只能在当前门店使用</view>
                <view class="text mb20">充值金额无到期时间，原则上不可退款，不可转让</view>
                <view class="text">温馨提示：平台倡导量力而为，理性消费；先体验，后充值</view>
            </view>
        </view>
        <view class="footer">
            <view class="btn" @click="submit">立即充值</view>
        </view>
        <uv-toast ref="uvtoast"></uv-toast>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import { walletRechargePackageList, walletRechargeCreate, orderSubmit, getWallet } from '@/service/index';
import { onLoad, onShow } from "@dcloudio/uni-app";
const uvtoast = ref()
const store = uni.getStorageSync('store')
const list = ref([])
const checkItem = ref({})
const itemIndex = ref(0)
const tableIndex = ref(null);
// const tableData = ref({
//     sale: '',
//     price1: '',
//     price2: '',
// })
const sale = ref('')
const tableData = ref([])
const myData = ref({
    balance: 0,
})
onShow(()=>{
    uni.$on('login',function(data){
		console.log('全局登陆事件');
		getList();
        getData();
	})
})
const getList = () => {
    walletRechargePackageList().then(res => {
        console.log(res);
        const result = res.flatMap((value, index, array) => {
            if (index % 2 === 0) {
                return [array.slice(index, index + 2)];
            }
            return [];
        });
        list.value = result;
        console.log(result, 'ress');
    })
}
const itemChange = (item, indexc, index) => {
    // console.log(indexc);
    const salevalue = ((1 - (item.bonusPrice / (item.payPrice + item.bonusPrice))) * 10).toFixed(1)
    checkItem.value = item;
    itemIndex.value = indexc;
    tableIndex.value = index;

    // tableData.value = {
    //     sale: sale,
    //     price1: ( 48 * sale / 10).toFixed(1),
    //     price2: ( 58 * sale / 10).toFixed(1),
    // }
    sale.value = salevalue
    tableData.value = item.items
}
const submit = () => {
    if(!checkItem.value.payPrice){
        uvtoast.value.show(
            {message: '请选择充值金额',}
        )
        return
    }
    uni.showLoading({
        mask: true,
    });
    const params = {
        payPrice: checkItem.value.payPrice,
        packageId: checkItem.value.id,
        validPayPriceAndPackageId: true,
    }
    walletRechargeCreate(params).then(res => {
        payOrder(res)
    }).catch(()=>{
        uni.hideLoading();
    })
}
const goDetail = () => {
    uni.navigateTo({
        url: '/pages/recharge/detail'
    })
}
const getData = () => {
     uni.showLoading({
        mask: true,
    });
    getWallet({isLogin:false}).then(res => {
        uni.hideLoading();
        console.log(res, 'res');
        myData.value = res;
        if(!myData.value.bonusBalance){ // 充值余额为空的时候,赠送余额等于余额
            myData.value.rechargeBalance = myData.value.balance
        }
    }).catch(() => {
        uni.hideLoading();
    })
}
const payOrder = (param) => {
    console.log(param, 'param');
    const orderid = param.id
    const params = {
        "id": param.payOrderId,
        "channelCode": "wx_lite",
        "channelExtras": {
            "openid": uni.getStorageSync('openid'),
        },
    }
    orderSubmit(params).then(res => {
        const payConfig = JSON.parse(res.displayContent)
        console.log(payConfig, 'pay');
        uni.requestPayment({
            provider: 'wxpay',
            timeStamp: payConfig.timeStamp,
            nonceStr: payConfig.nonceStr,
            package: payConfig.packageValue,
            signType: payConfig.signType,
            paySign: payConfig.paySign,
            success: (res) => {
                console.log(orderid, 'orderid');
                uvtoast.value.show(
                    {message: '充值成功',}
                )
                getData()
                uni.navigateTo({
                    url:`/pages/recharge/result?payPrice=${checkItem.value.payPrice}&bonusPrice=${checkItem.value.bonusPrice}`
                })
                uni.hideLoading()
            },
            fail: (err) => {
                uni.hideLoading()
                if (err.errMsg === 'requestPayment:fail cancel') {
                    uni.showToast({
                        title: '支付已取消',
                        icon: 'none',
                    });
                } else {
                    console.log(err, 'err');
                }
            },
        });
    }).catch((err) => {
        if (err.code === 1007002002) {
            //   uni.redirectTo({
            //     url:`/pages/order/detail?id=${orderid}`
            //   })
        }
        uni.hideLoading()
    })
}
const filterSale = (item) => {
    return ((1 - (item.bonusPrice / (item.payPrice + item.bonusPrice))) * 10).toFixed(1)
}
onLoad(() => {
    getList();
    getData();
})
</script>
<style lang='less' scoped>
.content {

    display: flex;
    flex-direction: column;
    height: 100vh;

    .main {
        padding: 22rpx 24rpx;
        height: 100%;
        flex: 1;
        overflow-y: scroll;
    }

    .head-card {
        position: relative;
        width: 100%;
        height: 314rpx;
        background: linear-gradient(315deg, #00B952 0%, #00E565 100%);
        border-radius: 20rpx;
        color: #fff;
        padding: 16rpx 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .name {
            font-weight: 600;
            font-size: 32rpx;
            padding: 0 24rpx;
        }

        .price {
            font-weight: 600;
            font-size: 100rpx;
            text-align: center;
        }

        .wd {
            padding: 0 24rpx;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            border-top: 2rpx solid rgba(255, 255, 255, 0.32);
            padding: 0 24rpx;
            padding-top: 24rpx;
        }

        .detail {
            position: absolute;
            right: -2rpx;
            top: 45%;
            display: flex;
            align-items: center;
            border-radius: 28rpx 0rpx 0rpx 28rpx;
            border: 2rpx solid #FFFFFF;
            padding: 8rpx 12rpx 8rpx 24rpx;

            image {
                width: 12rpx;
                height: 21rpx;
                margin-left: 14rpx;
            }
        }
    }

    .rechange {
        background-color: #fff;
        padding: 24rpx;
        margin-bottom: 20rpx;

        .title {
            font-weight: 600;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .detail {
                display: flex;
                align-items: center;
                color: #666;
                font-weight: 400;

                image {
                    width: 12rpx;
                    height: 21rpx;
                    margin-left: 14rpx;
                }
            }
        }

        .list {
            .list-item {

                // display: flex;
                // align-items: center;
                // justify-content: space-between;
                // flex-wrap: wrap;
                .list-table {
                    width: 100%;
                    border-radius: 20rpx;
                    font-size: 26rpx;
                    border: 2rpx solid #00C457;
                    position: relative;
                    margin-bottom: 20rpx;

                    .triangle-up {
                        position: absolute;
                        top: -20rpx;
                        width: 0;
                        height: 0;
                        border-left: 15rpx solid transparent;
                        border-right: 15rpx solid transparent;
                        border-bottom: 20rpx solid #00C457;

                        /* 可以替换为任意颜色 */
                        &.right {
                            right: 100rpx;
                        }

                        &.left {
                            left: 100rpx;
                        }
                    }

                    .thead {
                        border-radius: 20rpx 20rpx 0 0;
                        display: flex;
                        align-items: center;
                        background: #00C758;
                        justify-content: space-between;

                        view {
                            height: 68rpx;
                            line-height: 68rpx;
                            text-align: center;
                            flex: 1;
                            font-size: 26rpx;
                            color: #fff;
                        }

                        .f2 {
                            flex: 2;
                        }
                    }

                    .tr {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 100%;

                        view {
                            height: 68rpx;
                            font-size: 26rpx;
                            line-height: 68rpx;
                            text-align: center;
                            flex: 1;
                        }

                        .f2 {
                            flex: 2;
                        }

                    }

                    .td {
                        border-right: 2rpx solid rgba(255, 255, 255, 0.25);
                        border-left: 2rpx solid rgba(255, 255, 255, 0.25);
                    }
                }

                .item-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                }
            }

            .item {
                width: 50%;
                margin-bottom: 20rpx;
                // flex: 1;
                height: 144rpx;
                border: 2rpx solid #ECF0F2;
                border-radius: 20rpx;
                text-align: center;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                font-weight: bold;
                font-size: 40rpx;
                color: #333333;
                width: 48%;

                .sale {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #60656B;
                    margin-top: 10rpx;
                }

                &.check {
                    color: #fff;
                    background: linear-gradient(315deg, #00B952 0%, #00E565 100%);

                    .sale {
                        color: #fff;
                    }
                }
            }
        }
    }

    .rule {
        background-color: #fff;
        padding: 24rpx;

        .title {
            font-weight: 600;
            margin-bottom: 10rpx;
        }

        .text {
            font-size: 28rpx;
            color: #666666;
        }

        .mb20 {
            margin-bottom: 40rpx;
        }
    }

    .footer {
        padding: 34rpx 26rpx;
        box-shadow: 0rpx -12rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
        background-color: #fff;

        .btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
            border-radius: 60rpx;
            color: #fff;
            height: 100rpx;
            padding: 18rpx 42rpx;
            box-sizing: border-box;
            text-align: center;
        }
    }
}
</style>